<template>
    <!-- 项目列表弹出框 -->
    <van-popup v-model:show="props.modelValue"
        style="height: 80%;"
        @click-overlay="overlayEvt"
        position="bottom">
        <div>
            <input v-model="inputValue" @input="popupSearchEvt" type="text" placeholder="请输入要搜索的内容">
        </div>
        <ul>
            <li v-for="it in showList"
                @click="popupEvt(it)"
                v-show="it.show"
                :key="it.id">
                <!-- 如果是被选中以后那么样式要设置为active，否则没有选中 -->
                {{it.name}} <i :class="['icon', it.active && 'active']"></i>
            </li>
        </ul>
    </van-popup>
</template>

<script setup>
    import { defineProps, defineEmits, onMounted, reactive, ref, watch } from 'vue'
    import { meterialListApi, projectListApi, supplierListApi, userListApi } from '../../apis/purchaseApi'

    const emit = defineEmits(['pickDataEvt','update:modelValue'])
    const props = defineProps({
        modelValue: {
            type: Boolean,
            required: true
        },
        type: {
            type: String,
            default: ''
        }
    })
    const options = reactive({
        project: [],
        meterial: [],
        supplier: [],
        user: []
    })
    let showList = ref([])
    let inputValue = ref('')

    // 当弹出框弹出的时候，需要设置不同的数据
    watch(
        () => props.modelValue,
        function(flag) {
            if (flag) {
                showList = ref([])
                inputValue.value = ''
                options[props.type].forEach(it => {
                    // 最好做一个浅拷贝
                    showList.value.push({...it})
                })
            }
        }
    )
    onMounted(async function() {

        Promise.all([
            // 这个数组要很多个Promise对象
            projectListApi({name: '', page: 1, size: 1000}),
            meterialListApi(),
            supplierListApi({name: '', page: 1, size: 1000}),
            userListApi({name: '', page: 1, size: 1000})
        ]).then(d => {
            if (d[0].code === 200) {
                options.project = d[0].data.rows.map(it => {
                    it.show = true
                    return it
                })
            }
            if (d[1].code === 200) {
                options.meterial = d[1].data.rows.map(it => {
                    it.show = true
                    return it
                })
            }
            if (d[2].code === 200) {
                options.supplier = d[2].data.rows.map(it => {
                    it.show = true
                    return it
                })
            }
            if (d[3].code === 200) {
                options.user = d[3].data.rows.map(it => {
                    it.show = true
                    return it
                })
            }
        })
    })

    // 把用户选择的数据传递给外部
    function popupEvt(it) {
        emit('pickDataEvt', it)
    }

    // 点击遮罩层关闭弹出框
    function overlayEvt() {
        emit('update:modelValue', false)
    }
    let timer = ref()
    function popupSearchEvt(evt) {
        if (timer.value) clearTimeout(timer.value)
        timer.value = setTimeout(function() {
            showList.value.map(it => {
                // 如果名字包含了输入的数据，那么show就为真
                it.show = it.name.includes(evt.target.value)
            })
        }, 600)
    }
</script>

<style lang="less" scoped>
@import url('../../style/common.less');
input{
    margin-top:20px;
    border:1px solid @b04;
    margin-left:15px;
    width:360px;
    margin-bottom:10px;
}
li{
        margin-left:15px;
        border-bottom:1px solid @g03;
        width:360px;
        margin-top:10px;
        padding-bottom: 10px;
        font-size: 0.9rem;
    }

    .active {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: @b04;
    }
</style>